<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/stu.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>

<body>
    <div class="user">
        <h1>用户信息列表</h1>
    </div>
    <div class="container" id="container">
        <form>
            <div class="form-group">
                <label for="username">
                    <p>用户名：</p>
                </label>
                <input type="text" id="username" name="username" class="form-control">
            </div>
            <div class="form-group">
                <label for="password">
                    <p>密码：</p>
                </label>
                <input type="text" id="password" name="password" class="form-control">
            </div>
            <div class="form-group">
                <label for="confirmPwd">
                    <p>确认密码：</p>
                </label>
                <input type="text" id="confirmPwd" name="confirmPwd" class="form-control">
            </div>
            <div class="form-group">
                <label for="phone">
                    <p>联系方式：</p>
                </label>
                <input type="text" id="phone" name="phone" class="form-control">
            </div>
            <div class="form-group">
                <label for="age">
                    <p>年龄：</p>
                </label>
                <input type="text" id="age" name="age" class="form-control">
            </div>
            <div class="form-group">
                <label for="height">
                    <p>身高：</p>
                </label>
                <input type="text" id="height" name="height" class="form-control">
            </div>
            <div class="form-group">
                <label for="weight">
                    <p>体重：</p>
                </label>
                <input type="text" id="weight" name="weight" class="form-control">
            </div>
            <p>
                <i>性别：</i>
                </br>
                <input type="radio" name="gender" value="male">Male
                <input type="radio" name="gender" value="female">Female
            </p>
            <p class="hobby">
                <i>兴趣爱好：</i>
                </br>
                <input type="checkbox" name="hobby" value="Reading">Reading
                <input type="checkbox" name="hobby" value="Singing">Singing
                <input type="checkbox" name="hobby" value="Dancing">Dancing
                <input type="checkbox" name="hobby" value="Football">Football</br>
                <input type="checkbox" name="hobby" value="Basketball">Basketball
                <input type="checkbox" name="hobby" value="Games">Games
                <input type="checkbox" name="hobby" value="Drawing">Drawing
                <input type="checkbox" name="hobby" value="Swimming">Swimming
                <input type="checkbox" name="hobby" value="Yoga">Yoga
            </p>
            <p>
                <input type="button" value="更新信息" onclick="save()" class="update">
            </p>
        </form>
    </div>

</body>
<script>
    //获取用户信息
    var username = $('[name=username]');
    var password = $('[name=password]');
    var phone = $('[name=phone]');
    var age = $('[name=age]');
    var height = $('[name=height]');
    var weight = $('[name=weight]');

    //将用户修改的信息保存起来
    function save() {
        var data = {
            username: username.val(),
            password: password.val(),
            phone: phone.val(),
            age: age.val(),
            height: height.val(),
            weight: weight.val(),
            //性别是input框里是radio类型的，并且是被选中的属性
            gender: $('input:radio:checked').val(),
            //爱好设置为空
            "hobby": [],
        }
        //爱好是input框里是radio类型的，并且是被选中的属性
        $('input:checkbox:checked').val(function (index, value) {
            //将这个值放入到爱好hobby中
            data.hobby.push(value);
        });
        console.log(data);

        //将保存的信息传回服务器
        $.post('http://47.98.138.5:8089/user', {
            changeStr: JSON.stringify(data)
        }).done(function (result) {
            console.log(result);
        });
    }

    //将用户信息回填到页面当中去
    $.get('http://47.98.138.5:8089/user', { id: 's1' }, function (result) {
        console.log(result);
        username.val(result.username);
        password.val(result.password);
        phone.val(result.phone);
        age.val(result.age);
        height.val(result.height);
        weight.val(result.weight);
        //将数据中的性别，给上属性checked
        $('[value="' + result.gender + '"]').prop('checked', true);
        //map遍历数据中的hobby，取到里面的value，并给上属性checked
        $.map(result.hobby, function (value) {
            $('[value="' + value + '"]').prop('checked', true);
        });
    });

</script>
<script>
    $('form').validate({
        rules: {
            username: {
                required: true,
                rangelength: [6, 22]
            },
            password: {
                required: true,
                rangelength: [6, 22]
            },
            confirmPwd: {
                equalTo: '#pwd'
            },
            phone: {
                required: true,
                rangelength: 11
            },
            age: {
                required: true,
                rangelength: [1, 3]
            },
            height: {
                required: true,
                rangelength: [3, 5]
            },
            weight: {
                required: true,
                rangelength: [3, 5]
            }
        },
        messages: {
            username: {
                required: '请输入密码',
                rangelength: '用户名长度为6-22位'
            },
            password: {
                required: '请输入密码',
                rangelength: '密码长度为6-22位'
            },
            confirmPwd: '两次密码不一致',
            },
            phone: {
                required: "请输入手机号",
                rangelength: "格式不正确，是11位"
            },
            age: {
                required: "请输入年龄",
                rangelength: "请输入正确的年龄"
            },
            height: {
                required: "请输入身高",
                rangelength: "请输入正确的年龄，例如：180cm"
            },
            weight: {
                required: "请输入体重",
                rangelength: "请输入正确的体重"
            }
    });
</script>

</html>